<#include "/common/head.ftl">

<@showTitle title="${i18n.getMessage('teacher')} > ${i18n.getMessage('teachingHourReport')}">
</@showTitle>

<div id="error" style="display:none"></div>

<form id="form" validator="teacher/validateTeachingHourReport.sgt">
	<table id="dataTable" cellspacing="5" cellpadding="0" align="center">
		<tr>
			<td class="name"><@required/>${i18n.getMessage('fromDate')}:</td>
			<td><input type="text" id="fromDate" name="fromDate" value="${fromDate}" style="width:200px"/><img class="calendarImg" src="images/calendar/calendar.gif" onclick="displayCalendar(document.forms[0].fromDate, '${i18n.getMessage('format.date')}', this)"/></td>
		</tr>
		<tr>
			<td class="name"><@required/>${i18n.getMessage('toDate')}:</td>
			<td><input type="text" id="toDate" name="toDate" value="${toDate}" style="width:200px"/><img class="calendarImg" src="images/calendar/calendar.gif" onclick="displayCalendar(document.forms[0].toDate, '${i18n.getMessage('format.date')}', this)"/></td>
		</tr>
		<tr>
			<td class="name"></td>
			<td>
				<input type="button" value="${i18n.getMessage('report')}" onclick="report()" class="button_style"/> 
				<input type="button" value="Report to Excel" onclick="reportToExcel()" style="width:110px" class="button_style"/>
			</td>
		</tr>
	</table>
</form>

<script>
	report = function() {
		pp('teacher/doTeachingHourReport.sgt?fromDate=' + $('fromDate').value + '&toDate=' + $('toDate').value); 
	}
	
	reportToExcel = function() {
		pp('teacher/doTeachingHourReportToExcel.sgt?fromDate=' + $('fromDate').value + '&toDate=' + $('toDate').value); 
	}
</script>